<template>

  <div class="divBox">

    <!--<el-table
      :data="dList"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ 'text-align': 'center' ,'font-weight': 'bold' }"
      border
      style="width: 75%;margin-top: 50px;margin-left: 50px">

      <el-table-column  :resizable="false"
                        prop="name"
                        label="部门名称"
      >
      </el-table-column>
      <el-table-column  :resizable="false"
                        prop="leader"
                        label="负责人">
      </el-table-column>
      <el-table-column  :resizable="false"
                        prop="phone"
                        label="手机号码">
      </el-table-column>


      <el-table-column  :resizable="false"
                        label="状态">
        <template slot-scope="scope">
          &lt;!&ndash; {{scope.row.mg_state}}  slot-scope 作用域插槽 scope.row 可以获取当前所在行的数据 &ndash;&gt;
          &lt;!&ndash; 开关  &ndash;&gt;
          <el-switch :active-value="1" :inactive-value="0"

                     v-model="scope.row.status"></el-switch>
        </template>

      </el-table-column>

      <el-table-column prop="" label="执行操作"  :resizable="false" fixed="right">
        <el-row slot-scope="scope">

          <el-button type="primary" @click="showUd(scope.row)" icon="el-icon-edit"></el-button>
        </el-row>
      </el-table-column>

    </el-table>-->

    <el-table style="margin-top: 10px" :data="pageInfo.list" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}">

      <el-table-column  :resizable="false"
                        prop="name"
                        label="部门名称"
      >
      </el-table-column>
      <el-table-column  :resizable="false"
                        prop="leader"
                        label="负责人">
      </el-table-column>
      <el-table-column  :resizable="false"
                        prop="phone"
                        label="手机号码">
      </el-table-column>


      <el-table-column  :resizable="false"
                        label="状态">
        <template slot-scope="scope">
          <el-switch :active-value="1" :inactive-value="0" aria-disabled="true"

                     :value="scope.row.status"></el-switch>
        </template>

      </el-table-column>

      <el-table-column prop="" label="执行操作"  :resizable="false" fixed="right">
        <el-row slot-scope="scope">

          <el-button type="primary" @click="showUd(scope.row)" icon="el-icon-edit"></el-button>
        </el-row>
      </el-table-column>

    </el-table>

    <el-pagination
      :page-sizes="[4]"
      :page-size ="4"
      layout="total, sizes, prev, pager, next"
      @current-change="pageGetDept"
      :total="pageInfo.total"
    ></el-pagination>

    <el-dialog :visible.sync="udVisible" title="修改部门" style="width: 900px;margin: 0 auto">

      <el-form  :model="upDept" style="width: 350px">
        <el-form-item label="部门名称">
          <el-input v-model="upDept.name"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="upDept.leader"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="upDept.phone"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="upDept.status" label="1">正常</el-radio>
          <el-radio v-model="upDept.status" label="0">停用</el-radio>
        </el-form-item>
      </el-form>

      <div>
        <el-button @click="udVisible=false">取消</el-button>
        <el-button @click="updateDept">确定</el-button>
      </div>
    </el-dialog>



  </div>
</template>


<script>
  import { pageGetDept } from "@/api/dept";
  import { updateDept } from "@/api/dept";
  import {updateUser} from "@/api/user";
    export default {
        /*name: "dept",*/
      data() {
        return {
          pageInfo: {},
          upDept: {},
          udVisible: false
        }
      },

      mounted() {
        this.pageGetDept(1)
      },
      methods: {

        updateDept(){
          updateDept(this.upDept).then(resp=> {

            this.upDept={};
            this.udVisible=false;
            this.pageGetDept(1)
          })
        },

        showUd(user){
          this.upDept=user;
          this.udVisible=true;
        },

        pageGetDept(index){
          pageGetDept(index).then(resp=> {
            this.pageInfo=resp;
          })
        },
      }



    }
</script>

<style scoped>

</style>
